<template>
  <div>{{ ref }}</div>
  <button @click="handleChange">change</button>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'

let ref = shallowRef({ name: 'John', age: 30 })

const handleChange = () => {
  ref.value.name = 'Mary'
}

// const handleChange = () => {
//   ref.value = { name: 'Mary', age: 30 }
// }


</script>

<style scoped>

</style>